<template>
	<up-sticky>
		<view class="search-header" :style="{
		padding: `${top}px 24px 20px`,
	}">
			<view class="header-brand">
				<up-image src="/static/svg/act-top.svg" width="32px" height="32px"></up-image>
				<view class="page-title">骑行活动</view>
			</view>
			<view class="search-actions">
				<!-- <text class="iconfont">&#xe621;</text> -->
				<up-search bgColor="#FFFFFF" borderColor="#e2e8f0" placeholderColor="#94a3b8" :clearabled="false" placeholder="搜索活动、地点"
					height="40px" :show-action="false" v-model="PageData.Params.title" @search="List"></up-search>
				<up-image src="/static/svg/search.svg" width="40px" height="40px"></up-image>
			</view>
		</view>
		<view class="category-tabs withe-bg">
			<block v-for="info in PageData.TypeData" :key="info.id">
				<ActSearchItem :Info="info"  :active="info.id === PageData.Params.typeId" @Check="Check" />
			</block>
		</view>
			
	</up-sticky>

	<view class="up-p-l-48 up-p-r-48">
		<block v-for="info in PageData.List" :key="info.id">
			<ActItem :Info="info"></ActItem>
		</block>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import ActItem from '@/components/Act.vue';
	import ActSearchItem from '@/components/ActSearchItem.vue';
	const top = uni.getMenuButtonBoundingClientRect().top
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import ActApi from '@/Api/Activity.js'
	
	const PageData = ref({
		Params: {
			title: '',
			typeId: '',
		},
		List: [],
		TypeData: []
	})
	
	
	const List = () => {
		ActApi.List(PageData.value.Params).then(res => {
			PageData.value.List = res.data
		})
	}
	
	const TypeData = () => {
		ActApi.TypeData().then(res => {
			PageData.value.TypeData = [{ name: '全部', id: '' }].concat(res.data)
		})
	}
	
	const Check = (e) => {
		PageData.value.Params.typeId = e.id
		List()
	}
	
	onShareAppMessage(()=>{
		return {
			title: 'Ninebot车友俱乐部活动',
			path: '/pages/Event'
		}
	})
	
	List()
	TypeData()
	
</script>

<style scoped lang="scss">
	.search-header {
		display: flex;
		flex-direction: column;
		gap: 16px;
		background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
		border-bottom: 1px solid rgba(226, 232, 240, 0.8);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

		.header-brand {
			display: flex;
			align-items: center;
			gap: 12px;

			.page-title {
				font-size: 16px;
				font-weight: bold;
				color: #1f2937;
				margin: 0;
				background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}
		}

		.search-actions {
			display: flex;
			align-items: center;
			gap: 12px;

			.iconfont {
				font-size: 20px;
				position: absolute;
				left: 42px;
				color: #64748b;
				z-index: 2;
			}
		}
	}

	.category-tabs {
		display: flex;
		gap: 12px;
		padding: 16px 24px;
		overflow-x: auto;
		position: relative;
		z-index: 1;
		margin-bottom: 24px;
	}



	// ::v-deep .u-search__content {
	// 	padding: 0 !important;
	// 	border-style: unset !important;
	// 	border-width: 0 !important;
	// }
	
	::v-deep .u-search__content {
		border-width: 2px !important;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
	}
	

	::v-deep .u-search__content__input {
		padding: 0 6px 0 ;
		font-size: 15px;
		color: #1e293b;
	}

	::v-deep .u-scroll-list {
		padding-bottom: 0 !important;
	}
</style>